<template>
    <div class="house-container">
<!--        title-->
        <div class="title-container">
            <h2 style="width: 400px;">{{house.houseTitle}}</h2>
        </div>
<!--        房间信息-->
        <div>
            <span>{{house.housePrice}} 元/月</span>
            <el-divider direction="vertical"></el-divider>
            <span>{{house.houseArea}} m²</span>
            <el-divider direction="vertical"></el-divider>
            <span>{{house.roomNum}}室{{house.hallNum}}厅</span>
            <div style="margin-top: 10px;">
                <el-tag type="danger" v-if="house.rentType === 1" size="small">整租</el-tag>
                <el-tag type="warning" v-if="house.rentType === 2" size="small">合租</el-tag>
            </div>
            <div style="float: right; margin-bottom: 10px;">
                <span>发布时间:{{houseTime}}</span>
            </div>
        </div>
        <el-divider></el-divider>
<!--        房间图片-->
        <div class="house-photos">
            <div class="block">
                <el-carousel :interval="5000" arrow="always">
                    <el-carousel-item v-for="item in housePhotos" :key="item">
                        <img :src="item" style="width: 100%;height: 100%;">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="host-info">
                <a-card style="width: 220px; height: 300px;">
                    <h2>房东信息</h2>
                    <el-avatar shape="square" size="large" :src="host.avatar"></el-avatar>
                    <div>
                        <span>用户名：{{host.nickname}}</span>
                    </div>
                    <div>
                        <span>性别: {{host.sex === 0 ? "女" : "男"}}</span>
                    </div>
                    <div>
                        <span>联系电话: {{host.phone}}</span>
                    </div>
                    <el-button style="margin-top: 30px;" @click="dialog = true">点击租赁</el-button>
                </a-card>
            </div>

        </div>
<!--        房源概况-->
        <div class="house-profile">
            <a-descriptions title="房屋信息" style="margin-left: 20px; margin-top: 20px;">
                <a-descriptions-item label="户型">
                    {{house.roomNum}}室{{house.hallNum}}厅
                </a-descriptions-item>
                <a-descriptions-item label="面积">
                    {{house.houseArea}}平方米
                </a-descriptions-item>
                <a-descriptions-item label="合租">
                    {{house.maleNum}}男{{house.femaleNum}}女
                </a-descriptions-item>
                <a-descriptions-item label="位置">
                    {{house.housePlace}}
                </a-descriptions-item>
            </a-descriptions>
        </div>
<!--        房屋介绍-->
        <div style="border: 1px solid #d3d3d3; margin-top: 20px;">
            <h3 style="margin-top: 20px; margin-left: 20px;">房屋介绍</h3>
            <div style="border: 1px solid #d3d3d3; margin-top: 20px;">
                <span v-html="house.houseDesc"></span>
            </div>
        </div>
<!--        评论列表-->
        <div class="review-list">
            <h3 style="margin-top: 10px; font-weight: 700;">评论列表</h3>
            <a-card style="width: 100%; margin-top: 5px;" v-for="item in remark" :key="item.remarkId">
                <a-comment>
                    <template slot="actions" v-if="parseInt(guestId) === parseInt(item.userId)">
                        <span key="comment-delete" @click="deleteRemark(item.remarkId)"><a-icon type="delete" />DELETE</span>
                    </template>
                    <a slot="author">{{item.user.nickname}}</a>
                    <a-avatar
                            slot="avatar"
                            :src="item.user.avatar"
                            :alt="item.user.nickname"
                    />
                    <p slot="content">
                        {{item.remarkContent}}
                    </p>
                    <a-tooltip slot="datetime" :title="moment().format('YYYY-MM-DD HH:mm:ss')">
                        <span>{{item.remarkTime}}</span>
                    </a-tooltip>
                </a-comment>
            </a-card>
        </div>
<!--        发表评论-->
        <div>
            <h3 style="margin-top: 10px; font-weight: 700;">发表评论</h3>
            <div id="houseEditor">
            </div>
            <el-button type="success" style="float: right; margin-top: 10px;" @click="submitRemark">发表评论</el-button>
        </div>

<!--        生成订单抽屉-->
        <el-drawer
                title="生成订单"
                :before-close="handleClose"
                :visible.sync="dialog"
                direction="rtl"
                custom-class="demo-drawer"
                ref="drawer"
        >
            <div class="demo-drawer__content">
                <el-form :model="form">
                    <el-form-item label="房东昵称" :label-width="formLabelWidth">
                        <el-input v-model="host.nickname" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="房屋标题" :label-width="formLabelWidth">
                        <el-input v-model="house.houseTitle" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="月租" :label-width="formLabelWidth">
                        <el-input v-model="form.monthPrice" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="租赁方式">
                        <el-radio-group v-model="form.rentType">
                            <el-radio label="1">整租</el-radio>
                            <el-radio label="2">合租</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="租赁时长">
                        <el-date-picker
                                v-model="value1"
                                type="monthrange"
                                range-separator="至"
                                start-placeholder="开始月份"
                                end-placeholder="结束月份"
                                value-format="timestamp">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="总金额" :label-width="formLabelWidth">
                        <el-input v-model="form.totalPrice" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer" style="text-align: center">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="submitOrder">生成订单</el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
    import moment from 'moment';
    import E from 'wangeditor'
    export default {
        inject: ['reload'],
        name: "HousePage",
        data() {
            return {
                guestId: '',
                dialog: false,
                houseId: '',
                house: '',
                houseTime: '',
                houseEditor: '',
                houseHtml: '',
                housePhotos: [],
                value1: '',
                moment,
                remark: [],
                houseTxt: '',
                remarkObject: {
                    houseId: '',
                    userId: '',
                    remarkContent: ''
                },
                userId: '',
                host: '',
                form: {
                    guestId: '',
                    hostId: '',
                    houseId: '',
                    centMonths: '',
                    monthPrice: '',
                    totalPrice: '',
                    rentType: ''
                },
                formLabelWidth: '80px',
                timer: null,
            };
        },
        created() {
            this.houseId = this.$route.params.houseId
            this.guestId = localStorage.getItem("userId")
            console.log(this.guestId)
            const _this = this
            _this.$http.get('house/SelectHouseByHouseId/' + this.houseId).then(function (resp) {
                _this.house = resp.data.data
                _this.userId = _this.house.releaseId
                _this.houseTime = _this.house.releaseTime.split('T')[0]
                _this.form.guestId = localStorage.getItem("userId")
                _this.form.hostId = _this.userId
                _this.form.houseId = _this.houseId
                _this.form.monthPrice = _this.house.housePrice
                let moment = require('moment');
                _this.houseTime = moment(_this.houseTime).format('YYYY年MM月DD日')
                if(_this.house.housePhotos != null)
                {
                    _this.house.housePhotos = _this.house.housePhotos.split(',')
                    for(let i = 0; i < _this.house.housePhotos.length; i ++)
                    {
                        _this.house.housePhotos[i] = require('../static/house/' + _this.houseId + '/' + _this.house.housePhotos[i])
                        console.log(_this.house.housePhotos[i])
                        _this.housePhotos.push(_this.house.housePhotos[i])
                    }
                }

                const _that = _this
                _that.$http.get('user/getUserByUserId/' + _that.userId).then(function (resp) {
                    if(resp.data.code === 201)
                    {
                        _that.host = resp.data.data
                        if(_this.host.avatar != null)
                        {
                            _that.host.avatar = require('../static/user/' + _this.host.avatar)
                        }

                    }
                })
            })
            _this.$http.get('remark/selectHouseReviewsByHouseId/' + _this.houseId).then(function (resp) {
                if(resp.data.code === 203)
                {
                    console.log(resp)
                    let moment = require('moment');
                    moment.locale('zh-cn');
                    _this.remark = resp.data.data
                    for(let i = 0; i < _this.remark.length; i ++)
                    {
                        _this.remark[i].user.avatar = require('../static/user/'+ _this.remark[i].user.avatar)
                        _this.remark[i].remarkTime = _this.remark[i].remarkTime.replaceAll('T', ' ')
                        _this.remark[i].remarkTime = moment(_this.remark[i].remarkTime).format('LLL');  // 2021年3月9日晚上6点18分
                    }
                }
            })
        },
        mounted() {
        //    wangeditor
            const _this = this
            this.houseEditor = new E('#houseEditor')
            this.houseEditor.config.onchange = function (newHtml) {
                // console.log(newHtml)
            }
            this.houseEditor.config.height = 250
            this.houseEditor.config.placeholder = '请输入内容'
            // 取消自动 focus
            this.houseEditor.config.focus = false
            this.houseEditor.config.onblur = function (newHtml) {
                // console.log('onblur', newHtml) // 获取最新的 html 内容
            }
            this.houseEditor.config.onfocus = function (newHtml) {
                // console.log('onfocus', newHtml) // 获取最新的 html 内容
                _this.remarkObject.remarkContent = newHtml
            }
            this.houseEditor.create()
            this.houseHtml = this.houseEditor.txt.html()

        },
        methods: {
            submitRemark: function () {
                const _this = this
                this.remarkObject.houseId = this.houseId
                this.remarkObject.remarkContent = this.houseEditor.txt.text()
                this.remarkObject.userId = localStorage.getItem('userId')
                console.log(this.remarkObject)
                this.$http.post('/remark/submitHouseRemark', _this.remarkObject).then(function (resp) {
                    _this.reload()
                })
            },
            cancelForm() {
                this.dialog = false;
                clearTimeout(this.timer);
            },
            submitOrder: function () {
                const _this = this
                _this.$http.post('/letterIntent/insertNewLetterIntent', _this.form).then(function (resp) {
                    console.log(resp)
                    if (resp.data.code === 202)
                    {
                        _this.$message.success("生成订单成功，请联系房东")
                        _this.dialog = false
                    }else{
                        _this.$message.error("生成订单失败,请重新提交")
                        _this.dialog = false
                    }
                })
            },
            deleteRemark: function (e) {
                console.log(e)
                const _this = this
                let param = new URLSearchParams();
                param.append("remarkId", e)
                console.log(typeof e)
                _this.$http.post('/remark/deleteRemark', param).then(function (resp) {
                    console.log(resp)
                    if (resp.data.code === 204)
                    {
                        _this.$message.success("删除评论成功")
                        _this.reload()
                    }else{
                        _this.$message.error("删除失败")
                        _this.reload()
                    }
                })
            },
        },
        watch: {
            value1: function () {
                console.log(this.value1)
                // this.form.totalPrice
                const centMonths = moment(this.value1[1]).diff(moment(this.value1[0]), 'months')
                this.form.centMonths = centMonths
                this.form.totalPrice = centMonths * this.form.monthPrice
                console.log(this.form)
            }
        }
    }
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    .house-photos .block {
        margin: 15px auto;
        width: 95%;
        /*text-align: center;*/
    }
    .house-photos {
        border: 1px solid #D3D3D3;
        height:  330px;
        width: 960px;
        margin: 15px auto;
        display: flex;
    }
    .house-profile
    {
        border: 1px solid #d3d3d3;
    }
    .host-info {
        margin-left: 20px;
        margin-right: 20px;
        justify-content: space-between;
        align-self: center;
        text-align: center;
    }

</style>
